<template>
  <div>
    <div class="mainTool">
      <el-input placeholder="请输入角色英文名称" v-model="role.name" size="small">
        <template slot="prepend">POLE_</template>
      </el-input>
      <el-input v-model="role.nameZh" placeholder="请输入角色中文名称" size="small" el-icon-plus></el-input>
      <el-button type="primary" icon="el-icon-plus" size="small" @click="add">添加角色</el-button>
    </div>
    <div style="width: 800px">
      <el-collapse v-model="activeName" accordion @change="handleChange">
        <el-collapse-item :title="v.nameZh" :name="v.id" :key="i" v-for="(v,i) in this.roles">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>可访问资源</span>
              <el-button style="float: right; padding: 3px 0" type="text" class="delbtn" @click="del(v.id)"
                         icon="el-icon-delete"></el-button>
            </div>
            <el-tree
                show-checkbox
                :data="allMenus"
                :props="defaultProps"
                ref="tree"
                :default-checked-keys="chekedKey"
                node-key="id"
            ></el-tree>
            <div style="display: flex;justify-content: end">
              <el-button @click="cancelUpdate">删除</el-button>
              <el-button type="primary" @click="doUpdate(v.id,i)">确认修改</el-button>
            </div>
          </el-card>
        </el-collapse-item>

      </el-collapse>

    </div>
  </div>
</template>

<script>
export default {
  name: "PermissMana",
  data() {
    return {
      role:{
        nameZh: "",
        name: "",
      },
      roles: [],
      allMenus: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      chekedKey: [7, 8, 9],
      activeName: -1
    }
  },
  mounted() {
    this.initRoles()
  },
  methods: {
    del(id){
      this.deleteRequest("/system/basic/permission/role/"+id).then(resp=>{
        if (resp){
          this.initRoles()
        }else {
          this.$message.error('删除失败');
        }
      })

    },
    add(){
      if (this.role.name && this.role.nameZh){
        this.role.name = "POLE_"+this.role.name
        this.postRequest("/system/basic/permission/",this.role).then(resp => {
          if (resp) {
            this.role.name= ''
            this.role.nameZh = ''
            this.initRoles()
          }else {
            this.$message.error('新增失败');
          }
        })
      }
    },
    cancelUpdate(){
      this.activeName = -1
    },
    doUpdate(index,i) {
      let tree = this.$refs.tree[i]
      let checkedKeys = tree.getCheckedKeys(true)
      let url = '/system/basic/permission/menus/update'
      this.postRequest(url,{"rid":index,"mids":checkedKeys}).then(resp => {
        if (resp) {
          this.initRoles();
          this.activeName = -1
        }
      })
    },
    handleChange(val) {
      if (val) {
        this.initAllMenus();
        this.getRoleMenus(val)
      }
    },
    getRoleMenus(rid) {
      this.getRequest("/system/basic/permission/menus/" + rid).then(resp => {
        this.chekedKey = resp
      })
    },
    initRoles() {
      this.getRequest("/system/basic/permission/").then(resp => {
        console.log(JSON.stringify(resp))
            if (resp) {
              this.roles = resp
            }
          }
      )
    },
    initAllMenus() {
      this.getRequest("/system/basic/permission/menus").then(resp => {
        if (resp) {
          // console.log(JSON.stringify(resp))
          this.allMenus = resp
        }
      })
    }
  }
}
</script>

<style scoped>
.mainTool {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 12px;
}

.mainTool .el-input {
  width: 20%;
  margin-right: 6px;
}

.delbtn {
  color: #e7400d;
}

</style>